<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好友管理</title>
<link rel="stylesheet" href="/networkforum/css/user_info.css" />

<style type="text/css">
*{
	vertical-align:middle;
	margin:0px;
	padding:0px;
	border:0px;
	list-style:none;
}
.inner{
	width:47%;
	height:560px;
	border:1px solid #A3784E;
	position: relative;
}
.inner h2{
	font:12px normal;
	text-align:center;
	height:30px;
	line-height:30px;
	color:#5A7470;
	border-bottom:#A3784E dashed 1px;
}
.addUser{
	margin:5px 2px;
	height:30px;
	line-height:25px;
	font-size:14px;
}
.addUser span:first-child{
	float:left;
	margin-top:5px;
	padding:0px;
	cursor:auto;
	margin-left:2px;
}
.addUser span{
	cursor:pointer;
	margin-left:10px;
	padding:5px 3px 2px 3px;
	display: inline-block;
}
.addFriend{
	float:right;
	margin-right:10px;
}
/*******************friendList css*****************/
.friendList{
	float:left;
}
.fInner{
	width:100%;
	min-height:50px;
	height:auto;

}
.fInner li {
	width:100%;
	height:30px;
	border-bottom:1px dashed #D5D1BF;
	line-height:30px;
}
.fInner li span{
	font-size:13px;
	display:inline-block;
	padding:0px 2px;
}
#name{
	width:80px;
}
#sex,#state{
	width:30px;
}
#place,#age{
	width:50px;
}
#handle{
	width:30px;
	cursor: pointer;
	color:green;
}
#care{
	width:55px;
	cursor: pointer;
	color:green;
}
.paging{
	background-color: #E3CB8A;
	text-align: center;
	margin: 0 auto;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 25px;
	line-height: 25px;
	vertical-align: middle;
}
.paging span{
	font-size: 12px;
	padding: 2px 10px;
}
.paging input{
	float:none;
	clear:both;
	width:30px;
	height: 16px;
	border-radius:3px;
	border: none;
}
</style>
<script type="text/javascript">
var friendOption={
	'userName':{
		'param':{'id':"name"},
		'bind':{'userId':"userId",'title':"userName"}
	},
	isCare:{
		param:{id:"state"}
	},
	'userSex':{
		'param':{'id':"sex"},
	},
	'userPlace':{
		'param':{'id':"place"},
	}		
}
window.onload = function(){
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/friend/friend_list.do?index=0&size=10",function(d){
		//var data = eval("("+d+")");
		var data = toJson(d);
		page.view("friendInner",data,friendOption);
	});

	myajax.get("/networkforum/friend/count_size.do",function(d){
		paging.page({
			total:Math.ceil(d/10),
			url:"/networkforum/friend/friend_list.do",
			previou:document.getElementById("previouPage1"),
			next:document.getElementById("nextPage1"),
			current:document.getElementById("currentPage1"),
			max:document.getElementById("totalPage1"),
			callBack:function(data){
				var friendInner = document.getElementById("friendInner");
				var first = friendInner.children[0];
				var module = friendInner.children[1];
				friendInner.innerHTML = "";
				friendInner.appendChild(first);
				friendInner.appendChild(module);
				page.view("friendInner",data,friendOption)
				moule = null;
				frist= null;
				friendInner = null;
			},
		});
	});
	myajax = null;
}
function searchFriend(){
	var myajax = getByAjax();
	var name = document.getElementById("userName").value;
	myajax.init(null,"get",true);
	myajax.get("/networkforum/friend/user_list.do?userName="+encodeURIComponent(name),function(d){
		var ul = document.getElementById("searchInner");
		var first = ul.children[0];
		var header = ul.children[1];
		ul.innerHTML = "";
		ul.appendChild(first);
		ul.appendChild(header);

		//var data = eval("("+d+")");
		var data = toJson(d);
		page.view("searchInner",data.slice(0,10),friendOption);

		paging.page({
			ajaxLoad:false,
			data:data,
			total:Math.ceil(data.length/10),
			previou:document.getElementById("previouPage2"),
			next:document.getElementById("nextPage2"),
			current:document.getElementById("currentPage2"),
			max:document.getElementById("totalPage2"),
			callBack:function(d){
				var searchInner = document.getElementById("searchInner");
				var first = searchInner.children[0];
				var module = searchInner.children[1];
				searchInner.innerHTML = "";
				searchInner.appendChild(first);
				searchInner.appendChild(module);
				page.view("searchInner",d,friendOption);
				module = null;
				first= null;
				searchInner = null;
			}
		});
	});
	myajax = null;	

}
function deleteFriend(obj){
	var ul = document.getElementById("friendInner");
	ul.removeChild(obj);
	
	var userId = obj.children[0].userId;
	
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/friend/delete_relation.do?isBack=false&userId="+userId,function(d){
	});
	myajax = null;
}
function addFriend(event){
	event = event||window.event;
	var target = event.target;
	var userName = target.parentElement.children[0].innerHTML;
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/friend/add_friend.do?friendName="+encodeURIComponent(userName)+"&level="+encodeURIComponent("申请"),function(d){
		if(d == "true"){
			alert("申请成功!");
		}
		else{
			alert("申请失败（参数有误）");
		}
	});
	myajax = null;
}
function addCare(event){
	event = event||window.event;
	var target = event.target;
	var userId = target.parentElement.children[0].userId;
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/friend/add_care.do?friendId="+userId,function(d){
		if(d == "true"){
			alert("操作成功!");
		}
		else{
			alert("操作失败！");
		}
	});
	myajax = null;
	target.parentElement.children[3].innerHTML = "关心";
}
</script>
</head>

<body>
	<h2 class="header">好友管理</h2>
	<div class="friendList inner">
		<h2>已加好友</h2>
		<ul id="friendInner" class="fInner">
			<li style="display:none;">
				<span id="name"></span>
				<span id="sex"></span>
				<span id="place"></span>
				<span id="state"></span>
				<span id="care" onclick="addCare(event);" id="handle">添加关心</span>
				<span onclick="deleteFriend(this.parentElement);" id="handle">删除</span>
			</li>
			<li>
				<span id="name">昵称</span>
				<span id="sex">性别</span>
				<span id="place">地区</span>
				<span id="state">状态</span>
				<span id="handle">操作</span>
			</li>
		</ul>
		<div class="paging" id="paging">
	   		<div class="clear"></div>
	   		<span id="previouPage1" style="cursor: pointer;">上一页</span>
	   		<!--  <span id="currentPage2">1</span>-->
	   		<input id="currentPage1" type="text" value = "1"/>	
	   		<span id="nextPage1" style="cursor: pointer;">下一页</span>
	   		<span id="totalPage1">共 1 页</span>
	   	</div>
	</div>
	<div class="addFriend inner">
		<h2>添加好友</h2>
		<div class="addUser">
			<span>昵称：</span>
			<input id="userName" type="text" />
			<span onclick="searchFriend();">搜索</span>
		</div>
		<ul id="searchInner" class="fInner">
			<li style="display:none;">
				<span id="name"></span>
				<span id="sex"></span>
				<!-- <span id="age"></span> -->
				<span id="place"></span>
				<span id="place"></span>
				<span id="handle" onclick="addFriend(event);">添加</span>
			</li>
			<li>
				<span id="name">昵称</span>
				<span id="sex">性别</span>
				<!-- <span id="age">年龄</span> -->
				<span id="place"></span>
				<span id="place">地区</span>
			</li>
		</ul>
		<div class="paging" id="paging">
	   		<div class="clear"></div>
	   		<span id="previouPage2" style="cursor: pointer;">上一页</span>
	   		<!--  <span id="currentPage2">1</span>-->
	   		<input id="currentPage2" type="text" value = "1"/>	
	   		<span id="nextPage2" style="cursor: pointer;">下一页</span>
	   		<span id="totalPage2">共 1 页</span>
	   	</div>
	</div>
	
</body>
<script type="text/javascript" src="/networkforum/js/view.js"></script>
<script type="text/javascript" src="/networkforum/js/pageing.js"></script>
<script type="text/javascript" src="/networkforum/js/myajax.js"></script>
</html>
